<template>
  <div>
    <div><headers_copy></headers_copy></div>
    <el-container class="common-layout" style="height:800px" >
      <el-aside width="250px" height="800px" class="aside">
        <div class="aside-header">
          <div>
            <div class="demo-type">
              <div style="padding-left: 5px;padding-top:10px;">
                <el-avatar size="large" class="username" src="image" align="center"><img :src="image"></el-avatar>
                <el-divider  content="username" content-position="left">{{username}}</el-divider>

              </div>
            </div>
            <div style="padding-left: 10px;padding-bottom: 10px">
              <el-descriptions-item label="⽤户状态">{{state==0?'学⽣':'教师'}}</el-descriptions-item>
              <el-divider direction="vertical"></el-divider>
              <el-descriptions-item label="邮箱">{{mail}}</el-descriptions-item>
            </div>
          </div>
        </div>
        <div class="aside-main">
          <div class="aside-main-header">
            标签
            <i class="el-icon-edit"></i><hr>
          </div>
          <div class="aside-main-main" style="padding-top: 5px;padding-left: 5px">
            <el-tag
                :key="tag"
                v-for="tag in dynamicTags"
                content="tag">
              {{tag}}
            </el-tag>
            <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
            >
            </el-input>
          </div>
        </div>
        <div class="aside-footer">
          <div class="aside-footer-header" style="padding-left:10px;padding-top:5px;padding-bottom:5px;border:1px;">
            最新⽂章推荐
            <i class="el-icon-male"></i></div><hr>
          <div class="aside-footer-main">
            <router-link  v-on:click.native="reset" :to="{name:'BlogDetail',query:{aid:aid1}}" style="color: #333333;text-decoration: none" content="title" >
              <el-link style="padding-left: 5px;padding-bottom: 5px" :content="title1">
                <i class="el-icon-s-promotion"></i>
                {{title1}}</el-link><br> </router-link>
            <router-link v-on:click.native="reset" :to="{name:'BlogDetail',query:{aid:aid2}}" style="color: #333333;text-decoration: none" content="title" >
              <el-link style="padding-left: 5px;padding-bottom: 5px" :content="title2">
                <i class="el-icon-s-promotion"></i>
                {{title2}}</el-link><br></router-link>
            <router-link v-on:click.native="reset" :to="{name:'BlogDetail',query:{aid:aid3}}" style="color: #333333;text-decoration: none" content="title" >
              <el-link style="padding-left: 5px;padding-bottom: 5px" :content="title3">
                <i class="el-icon-s-promotion"></i>
                {{title3}}</el-link><br> </router-link>
          </div>
        </div>
      </el-aside>
      <el-container class="container">
        <el-header class="header" content="ArticalTitle"style="font-size:xx-large;" align="center">{{ArticalTitle}}</el-header>
        <div style="padding-left: 20px;font-size: smaller;" align="center">
          <span content="Time" align="center"><i class="el-icon-date"></i>{{Time}}</span>
          <el-divider direction="vertical"></el-divider>
          <span><el-button type="text" content="upnum" @click="upup"><i class="el-icon-collection-tag"></i>点赞{{upnum}}</el-button></span>
          <el-divider direction="vertical"></el-divider>
          <span> <el-button type="text" content="shoucang" @click="upupup"><i class="el-icon-star-off"></i>收藏{{shoucang}}</el-button></span>
        </div>
        <!--el-main class="main" v-html="ArticalContent"></el-main-->
        <!--div>{{ArticalContent}}</div-->
        <div v-katex="'\\frac{a_i}{1+x}'" class="mdc">
          <mavon-editor
              :value="ArticalContent"
              :subfield = "prop.subfield"
              :defaultOpen = "prop.defaultOpen"
              :toolbarsFlag = "prop.toolbarsFlag"
              :editable="prop.editable"
              :scrollStyle="prop.scrollStyle"
          />
        </div>
        <el-footer class="footer">
          <div class="evaluate">
            评分: <el-rate style="color: rgb(238, 241, 246)"
                         show-text>
          </el-rate>
          </div>
          <div class="comment">
            <comment :comments="commentData"></comment>
          </div>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>
<style scoped>
footer-evaluate{height: 5%}
evaluate{}
.comment{width:104%;height: 300px;background-color:rgb(238, 241, 246);transform:translateX(-21px);float: left}
body{margin:75px;position: relative;background-color:white;border-radius: 30px;}
.common-layout{}
.aside-header{height:18% ;border-bottom:8px solid white; border-right:8px solid white;background-color:rgb(238, 241,
246)}
.aside-main{height:40% ;border-bottom:8px solid white;border-right:8px solid white;background-color:rgb(238, 241, 246)}
.aside-main-header{height:10% ;border:2px;background-color:rgb(238, 241, 246);margin:0;padding-left:10px;paddingtop:5px;box-sizing: border-box;}
.aside-footer{height:40% ;border-right:8px solid white;background-color:rgb(238, 241, 246)}
.container{height:750px;background-color:rgb(238, 241, 246)}
.aside{position:relative;background-color:rgb(238, 241, 246)}
.header{height:100px;border-radius: 30px;padding-left:20px;padding-top:10px;background-color:rgb(238, 241, 246);}
.main{height:800px;border:1px solid white;background-color:rgb(238, 241, 246)}
.footer{height:300px;border:1px solid white;background-color:rgb(238, 241, 246)}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag { width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.mdc{
  width: auto;
}
</style>
<script>
// import * as CommentData from '@/mockdata.js'
import comment from '@/components/comment'
import headers_copy from "../components/headers_copy";
import 'github-markdown-css'
import QS from 'qs'
const axios = require('axios');
export default {
  name: "BlogDetail",
  components: {
    comment,
    headers_copy
  },
  inject:['reload'],
  data () {
    return {
      commentData: [],
      dynamicTags: [],
      inputVisible: false,
      aid:this.$route.query.aid,
      uid:'',
      inputValue: '',
      ArticalTitle:'',
      ArticalContent:'',
      Time:'',
      upnum:'',
      shoucang:'',
      //个⼈中⼼
      mail:'',
      image:'',
      username:'',
      state:'',
      title1: '',
      title2: '',
      title3: '',
      aid1:'',
      aid2:'',
      aid3:'',

      opt:''
    }
  },
  created () {

    //this.commentData = CommentData.comment.data
    this.upNum()
    this.Art()
    this.new()


  },
  methods: {
    reset(){
      this.$router.go(0);
    },

    upup(){
      const _this=this
      axios.get("http://47.107.40.143:8080/pcOption",{params:{
          aid:_this.$route.query.aid,
          uid:sessionStorage.getItem("uid"),
          opt:0,
        }

      }).then(function(res){
        _this.reload();
        console.log(res)
      })
    },
    upupup(){
      const _this=this
      axios.get("http://47.107.40.143:8080/pcOption",{params:{
          aid:_this.$route.query.aid,
          uid:sessionStorage.getItem("uid"),
          opt:1,
        }

      }).then(function(res){
        _this.reload();
        _this.$router.go(0)
      })
    },
    handleClose (tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
    },
    showInput () {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputConfirm () {
      let inputValue = this.inputValue
      if (inputValue) {
        this.dynamicTags.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    },
    upNum(){
      const _this=this
      axios.get('http://47.107.40.143:8080/getDigital',{params:{aid:this.aid}}).then(function (resp){
        _this.upnum=resp.data.data.praiseNum
        _this.shoucang=resp.data.data.collectNum
        console.log(resp)
        console.log('查的数据为'+_this.upnum)
      })
    },
    Art(){
      const _this=this
      axios.get('http://47.107.40.143:8080/article',{params:{aid:this.aid}}).then(function (resp){
        _this.ArticalTitle=resp.data.data[0].title
        var MarkdownIt=require("markdown-it")
        var md=new MarkdownIt()
        var result=md.render(resp.data.data[0].md_content)
        _this.ArticalContent=resp.data.data[0].md_content
        _this.Time=resp.data.data[0].editTime
        _this.dynamicTags=resp.data.data[0].tagNameList
        _this.uid=resp.data.data[0].uid
        console.log(resp)
        console.log('查的数据为'+_this.uid)
        axios.get('http://47.107.40.143:8080/head',{params:{uid:_this.uid}}).then(function (resp){
          console.log(resp)
          _this.username=resp.data.data[0].username
          _this.mail=resp.data.data[0].email
          _this.image=resp.data.data[0].iconurl
          _this.state=resp.data.data[0].category
          console.log('查的数据为'+_this.mail)
        })
        axios.get("http://47.107.40.143:8080/getTop3", {params: {uid:_this.uid}}).then(res => {
          _this.title1 = res.data.data[0].title
          _this.title2 = res.data.data[1].title
          _this.title3 = res.data.data[2].title
          _this.aid1 = res.data.data[0].aid
          _this.aid2 = res.data.data[1].aid
          _this.aid3 = res.data.data[2].aid
          console.log(res)
          console.log('查的数据'+_this.aid1)
        })
      })
    },


  },
  computed: {
    prop () {
      let data = {
        subfield: false,// 单双栏模式
        defaultOpen: 'preview',//edit： 默认展示编辑区域 ， preview： 默认展示预览区域
        editable: false,
        toolbarsFlag: false,
        scrollStyle: true
      }
      return data
    }
  },

}
</script>

